<template>
	<view class="me-content" :style="{'--tapBarHeight':tapBarHeight}">
		<view class="info">
			<view>
				<u-avatar text=""></u-avatar>
			</view>
			<view style="padding-left: 15rpx;">
				<u--text size="10px" color="#C4C4C4" :lines='1' :text="user_id"></u--text>
				<u--text color="#000000" :lines='1' :text="username"></u--text>
				<!-- <u--text text="id"></u--text> -->
			</view>
		</view>
		<view class="list">
			<!-- 	<view class="itm">
				<u-button text="修改信息"></u-button>
			</view> -->
			<view class="itm">
				<view class="">
					<u-button @click="showPassword = !showPassword" text="修改信息"></u-button>
				</view>
				<view v-if="showPassword == true" class="itm-password">
					<u--form labelPosition="left" :model="loginObj" :rules="rules" ref="uForm">
						<u-form-item labelWidth='80px' label="旧密码" prop="passwordOld" borderBottom ref="item1">
							<u--input v-model="loginObj.passwordOld" type="password" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth='80px' label="新密码" prop="password" borderBottom ref="item1">
							<u--input v-model="loginObj.password" type="password" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view v-if="showPassword == true" class="">
					<u-button text="确认修改"></u-button>
					<!-- 					<u-button @click = "submit" text="确认修改"></u-button> -->
				</view>
			</view>
			<view class="itm">
				<u-button @click="quitEv" text="退出登录"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		tapBarHeight
	} from '@/common/js/commonConst.js';

	import {
		LoginApiPut
	} from '@/common/api/login.js';

	export default {
		components: {

		},
		data() {
			return {
				tapBarHeight: tapBarHeight,
				showPassword: false,
				loginObj: {
					passwordOld: '',
					password: ''
				},
				rules: {
					username: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					passwordOld: {
						type: 'string',
						required: true,
						message: '请填写旧密码',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写新密码',
						trigger: ['blur', 'change']
					},
				},
				user_id: uni.getStorageSync('user_id'),
				username: uni.getStorageSync('username')
			}
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				uni.showModal({
					content: '请登录',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				})
			}

			// this.user_id = uni.getStorageSync('user_id')
			// this.username = uni.getStorageSync('username')
		},
		async onLoad(options) {

		},
		async onReady() {

		},
		methods: {
			// 退出登录
			quitEv() {

				uni.setStorageSync('token', '')
				uni.setStorageSync('user_id', '')
				uni.setStorageSync('user_name', '')
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			// 登录
			async submit() {
				// let arr_data = await LoginApiPost()
				let uForm = await this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					return true
				}).catch(errors => {
					uni.showModal({
						content: '校验失败请输入修改信息',
						showCancel: false
					});
				})
				if (uForm == true) {

					try {
						uni.showLoading({
							title: '修改中请稍等',
							mask: true
						});
						console.log(444)
						console.log(this.loginObj)
						console.log(this.user_id)
						let arr_data = await LoginApiPut(this.user_id, this.loginObj)
						uni.hideLoading();
						console.log(arr_data)
						if (arr_data.statusCode == 202) {

							uni.showModal({
								content: arr_data.data.msg,
								showCancel: false
							});

							return
						}
						if (arr_data.statusCode !== 200) {

							uni.showModal({
								content: '修改失败',
								showCancel: false
							});
							return
						}
						uni.setStorageSync('token', '')
						uni.setStorageSync('user_id', '')
						uni.setStorageSync('user_name', '')
						uni.showModal({
							content: '修改成功重新登录',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.reLaunch({
										url: '/pages/login/login'
									});
								}
							}
						})
					} catch (e) {
						//TODO handle the exception
						uni.hideLoading();
						uni.showModal({
							content: '修改密码接口请求请联系管理员',
							showCancel: false
						});
					}
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		// background-color: pink;
	}

	.me-content {
		background-color: pink;
		height: 100%;
		font-size: 30rpx;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background: #ffffff;
		// background: linear-gradient(to bottom, #E5F1EE, #FFFFFF);
	}

	.info {
		display: flex;
		height: 200rpx;
		align-items: center;
		background-color: pink;
		padding-left: 100rpx;
		box-sizing: border-box;
		// justify-content: center;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
	}

	.list {
		padding-top: 15rpx;

		.itm {
			padding-top: 5rpx;
			box-sizing: border-box;
		}

		// margin-top: 10rpx;
		// position: fixed;
		// bottom: var(--tapBarHeight);
		// width: 100%;
	}

	.itm-password {
		display: flex;
		justify-content: center;
	}
</style>